/* 
    实现添加功能,将表单form内的三个input的值通过按钮btn1输入到相应的表格上去
    实现超链接的删除功能,把当前超链接所在的tr表格信息删除

*/
/* 
    如果说使用document.links,会获取全局,会导致所有的超链接都被获取到,操作的时候也是一样
    可以用选择器来选择
*/
const tdA = document.querySelectorAll(".td-a")
console.log(tdA);
document.addEventListener("click", event => {
    // 出发条件...
    if ([...tdA].includes(event.target)) {
        // 让0变成变量,并且是当前触发的超链接
            (function (g) {
                const tr = tdA[g].parentNode.parentNode
                const empName = tr.firstElementChild.textContent
                if (confirm("确认是否删除[" + empName + "]吗?")) {
                    tr.remove()
                }
            })(event.target)
    }
})

// 如果把函数写在循环内,那么循环一次,函数就执行一次,这样就重复声明了,性能不好
// for (let i = 0; i < trlinks.length; i++) {
//     trlinks[i].addEventListener("click", function () {
//         /* 
//             本练习中的超链接,我们是不希望发生跳转,但是跳转行为是超链接的默认行为
//             只要点击号链接就会触发页面的跳转,事件中可以通过取消默认行为来阻止超链接的跳转
//             使用return false 来取消,只在 xxx.xxx = function(){}这个形式绑定的事件中才适用
//             return false
//         */
//         // 删除当前超链接所在的tr内的td内容,可以通过tdis,也就说,他循环在哪次,我们用的就是哪次超链接的tr
//         console.log(trlinks);
//         // 先获取tdis的祖先元素tr
//         const tr = trlinks[i].parentNode.parentNode
//         // 获取要删除的员工的姓名
//         //获取tr.的第一个子元素的文字
//         const empName = tr.firstElementChild.textContent
//         //一般来说,要删东西都会给出一个提醒,提醒是否要删,confirm函数可以弹出是与否,并且返回一个布尔值
//         if (confirm("确认是否删除[" + empName + "]吗?")) {
//             tr.remove()
//         }
//     })

// }
// 先获取每个input的div属性
const outerform = document.querySelectorAll(".outer > form > div")
console.log(outerform);
// 然后获取每个input的value值!
// 获取btn
const btn1 = document.getElementById("btn1")
// btn1.addEventListener("click", function () {
//     for (let i = 0; i < outerform.lengtd; i++) {
//         // 把每个input的 value值获取到
//         const divinput = outerform[i].querySelector("input")
//         console.log(divinput.value);
//         // 获取到后把值复制到tbody里
//         /*
//         从第一个tr后添加一个tr,里面包含三个td,td内有三个分别获取到的值
//         */
//         // 获取tbody元素,并且在元素的最后添加获取到的值
//         const tbody = document.querySelector(".outer > table > tbody")
//         console.log(tbody);
//         const td = document.createElement('td')
//         td.textContent = `<td>${divinput.value}</td>`
//         tbody.insertAdjacentdTML("beforeend", td)
//     }
// }) 笨逼思考半天的代码

const tbody = document.querySelector("tbody")
btn1.onclick = function () {
    // 获取用户输入的数据
    // 获取的是id为name的元素的value属性
    const name = document.getElementById("name").value
    const email = document.getElementById("email").value
    const salary = document.getElementById("salary").value

    // 然后向tbody的最后面输出获得的元素 =就是
    /* 
    <tr>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td><a href="javascript:;">删除</a></td>
          </tr>
    */
    // tbody.insertAdjacentdTML("beforeend",
    //     `
    //     <tr>
    //     <td>${name}</td>
    //     <td>${email}</td>
    //     <td>${salary}</td>
    //     <td><a href="javascript:;" id="td-a">删除</a></td>
    //     </tr>
    //     `
    //     /* 
    //     由于上面的超链接是新添加的,所以上边柄没有绑定单机相应函数,所以新添加的员工无法删除
    //     // 结果方式,为新添加的超链接也加上绑定响应函数
    //      */

    // )
    // 另外一种方法:
    // 可以避免XSS入侵
    // 创建Tr元素,作为目录
    const tr = document.createElement("tr")
    // 创建三个td元素,并且将文本内容设置为三个value属性
    const nameTd = document.createElement("td")
    const emailTd = document.createElement("td")
    const salaryTd = document.createElement("td")
    nameTd.textContent = name
    emailTd.textContent = email
    salaryTd.textContent = salary
    // console.log(name);
    // console.log(email);
    // console.log(salary);
    // 将三个td加入到tr中,还有固定不变的删除的<a>超链接
    tr.appendChild(nameTd)
    tr.appendChild(emailTd)
    tr.appendChild(salaryTd)
    tr.insertAdjacentHTML("beforeend", '<td><a href="javascript:;" class="td-a">删除</a></td>')
    // 然后将其添加到tbody中,让其进入列表
    tbody.appendChild(tr)
}
const newlinks = document.links
// 这个暂时还不会,等后面学到,我再给他绑定上去




